Web Design Guidelines Skill

概述

Vercel Agent Skills 中的 UI 设计规范技能，基于 vercel-labs/web-interface-guidelines 仓库，提供 100+ 条设计规范的自动化审查。

关键内容

1. 动态更新机制：技能执行时会动态获取最新的规范内容，确保始终使用最新版本

2. 规范覆盖范围：

3. 无障碍：图片 alt 属性、表单标签关联、正确的 ARIA 使用
4. 焦点管理：可见的 focus ring、合理 tab 顺序、模态框焦点捕获
5. 触摸目标：按钮最小 44×44px 符合 iOS HIG 标准
6. 减弱动效：尊重 prefers-reduced-motion 偏好设置
7. 语义 HTML：正确使用 <nav>, <main>, <article>, <aside>
8. 键盘导航：所有功能支持键盘操作

9. 颜色对比：符合 WCAG AA 标准

10. 与美学层技能的互补：与 Anthropic frontend-design 技能形成层次化防护

来源

• 05_vercel_agent_skills_react.md — Vercel Agent Skills React 系列深度解析

相关

• Vercel Agent Skills — part_of
• UI Design — implements
• Accessibility — implements